import Vue from 'vue'
import VueRouter from 'vue-router'

// 解决方案：---》解决路由多次点击跳转报错
const routerPush = VueRouter.prototype.push;
VueRouter.prototype.push = function (location) {
  return routerPush.call(this, location).catch((err) => { });
};

Vue.use(VueRouter)

const routes = [
  {//进入页面重定向到layout页
    path: "/",
    redirect: "/layout"
  },
  { //登录路由
    path: "/login",
    name: "login",
    component: () => import("../views/login/index.vue")
  },
  { //layout页
    path: "/layout",
    name: "layout",
    component: () => import("../views/layout/index.vue"),
    children: [ //子路由
      { //用户管理 tab切换
        path: "user",//子路由的path不需要加/ 
        name: "User",
        component: () => import("../views/user/index.vue")
      },
      { //首页
        path: "home",
        name: "Home",
        component: () => import("../views/home/index.vue")
      },
      { //视频管理页
        path: "video",
        name: "Video",
        component: () => import("../views/video/index.vue")
      },
      {//课程
        path: "course",
        name: "Course",
        component: () => import("../views/course/index.vue"),
        // 路由独享守卫
        beforeEnter (to, from, next) {
          if (localStorage.token) {
            next();
          } else {
            next("/login")
          }
        }
      },
      {//手机管理
        path: "phone",
        name: "Phone",
        component: () => import("../views/phone/index.vue"),
        children: [ //三级路由
          {
            path: "apple", name: "Apple", component: () => import("../views/apple/index.vue"),
            // 路由自定义信息meta
            meta: {
              title: "美国苹果公司市值世界第一",
              isLogin: true
            }
          },
          {
            path: "huawei", name: "Huawei", component: () => import("../views/huawei/index.vue"),
            meta: {
              title: "华为遥遥领先",
              isLogin: false
            }
          },
        ]
      },
      { //详情页 进入比传参 /:参数
        // :参数 使用params传参
        // :?参数 代表可以忽略的参数 

        path: "detail/:pid",
        name: "Detail",
        alias: "mydetail",//路由别名
        component: () => import("../views/detail/index.vue")
      }
    ]
  }

]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})


export default router
